"use client";

import { useState, useRef, useEffect, useLayoutEffect } from "react";
import { useDebouncedCallback } from "use-debounce";
import { useRouter } from "next/router";

import { toPng } from "html-to-image";
import { saveAs } from "file-saver";

import { Dialog, Popover, ActionSheet } from "antd-mobile";
import type { Action } from "antd-mobile/es/components/action-sheet";
import { IconButton } from "./button";
import { ChatList, UpdateTopicdModal } from "./chat";
import styles from "./home.module.scss";

import SettingsIcon from "../icons/settings.svg";
import ChatIcon from "../icons/gpt.svg";
import SendWhiteIcon from "../icons/send-white.svg";
import ExportIcon from "../icons/export.svg";
import BotIcon from "../icons/bot.svg";
import AddWhiteIcon from "../icons/add-white.svg";
import ShareIcon from "../icons/share.svg";
import StarIcon from "../icons/star.svg";
import StarSelectedIcon from "../icons/star-selected.svg";
import MoreIcon from "../icons/more.svg";
import VoiceDarkIcon from "../icons/voice-dark.svg";
import LoadingIcon from "../icons/three-dots.svg";
import MenuIcon from "../icons/menu.svg";
import CloseIcon from "../icons/close.svg";
import CopyIcon from "../icons/copy.svg";
import DownloadIcon from "../icons/download.svg";
import AvatarIcon from "../icons/avatar-man.svg";
import ExitIcon from "../icons/exit.svg";

import { getConversationList } from "@/api/conversation";

import {
  Message,
  SubmitKey,
  useChatStore,
  useAuthStore,
  ChatSession,
} from "@/store";
import { useAutoLogin } from "@/hooks/usePrivateRoute";

import { showModal } from "./ui-lib";
import {
  copyToClipboard,
  downloadAs,
  inNestedIframe,
  isMobile,
  isWebView,
  selectOrCopy,
} from "../utils/utils";
import Locale from "../locales";
import dayjs from "dayjs";

import dynamic from "next/dynamic";
import { ControllerPool } from "../utils/requests";
import { Prompt, usePromptStore } from "@/store/prompt";
// import { VoicePopup } from "./voice";

type RenderMessage = Message & { preview?: boolean };

interface IMessageContainer {
  isUser: boolean;
  message: RenderMessage;
  onResend: (index: number) => void;
  onRightClick: (e: any, message: Message) => void;
  fontSize: number;
  index: number;
}

export function Loading(props: { noLogo?: boolean }) {
  return (
    <div className={styles["loading-content"]}>
      {!props.noLogo && <BotIcon />}
      <LoadingIcon />
    </div>
  );
}

const VoicePopup = dynamic(async () => (await import("./voice")).Voice, {
  ssr: false,
});
const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
});

const Settings = dynamic(async () => (await import("./settings")).Settings, {
  loading: () => <Loading noLogo />,
});

const Emoji = dynamic(async () => (await import("emoji-picker-react")).Emoji, {
  loading: () => <LoadingIcon />,
});

export function Avatar(props: { role: Message["role"] }) {
  const config = useChatStore((state) => state.config);

  if (props.role === "assistant") {
    return <BotIcon className={styles["user-avtar"]} />;
  }
  if (inNestedIframe() || isWebView()) {
    return (
      <div className={styles["user-avtar"]}>
        <AvatarIcon className={styles["user-avtar"]} />
      </div>
    );
  }

  return (
    <div className={styles["user-avtar"]}>
      <Emoji unified={config.avatar} size={18} />
    </div>
  );
}

// export function ChatItem(props: {
//   onClick?: () => void;
//   onDelete?: () => void;
//   title: string;
//   count: number;
//   time: string;
//   selected: boolean;
// }) {
//   const handleDelete = async (event: MouseEvent<HTMLDivElement>) => {
//     event.stopPropagation();
//     const result = await Dialog.confirm({
//       content: Locale.Home.DeleteChat,
//     });
//     if (result) {
//       props.onDelete?.();
//     }
//   };
//   return (
//     <div
//       className={`${styles["chat-item"]} ${
//         props.selected && styles["chat-item-selected"]
//       }`}
//       onClick={(e) => {
//         props.onClick?.();
//       }}
//     >
//       <div className={styles["chat-item-title"]}>{props.title}</div>
//       <div className={styles["chat-item-info"]}>
//         <div className={styles["chat-item-count"]}>
//           {Locale.ChatItem.ChatItemCount(props.count)}
//         </div>
//         <div className={styles["chat-item-date"]}>{props.time}</div>
//       </div>
//       <div className={styles["chat-item-delete"]} onClick={handleDelete}>
//         <DeleteIcon />
//       </div>
//     </div>
//   );
// }

// export function ChatList() {
//   const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
//     (state) => [
//       state.sessions,
//       state.currentSessionIndex,
//       state.selectSession,
//       state.removeSession,
//     ],
//   );

//   return (
//     <div className={styles["chat-list"]}>
//       {sessions.map((item, i) => (
//         <ChatItem
//           title={item.topic}
//           time={item.lastUpdate}
//           count={item.messages.length}
//           key={i}
//           selected={i === selectedIndex}
//           onClick={() => selectSession(i)}
//           onDelete={() => removeSession(i)}
//         />
//       ))}
//     </div>
//   );
// }

function useSubmitHandler() {
  const config = useChatStore((state) => state.config);
  const submitKey = config.submitKey;

  const shouldSubmit = (e: KeyboardEvent) => {
    if (e.key !== "Enter") return false;

    return (
      (config.submitKey === SubmitKey.AltEnter && e.altKey) ||
      (config.submitKey === SubmitKey.CtrlEnter && e.ctrlKey) ||
      (config.submitKey === SubmitKey.ShiftEnter && e.shiftKey) ||
      (config.submitKey === SubmitKey.MetaEnter && e.metaKey) ||
      (config.submitKey === SubmitKey.Enter &&
        !e.altKey &&
        !e.ctrlKey &&
        !e.shiftKey &&
        !e.metaKey)
    );
  };

  return {
    submitKey,
    shouldSubmit,
  };
}

export function PromptHints(props: {
  prompts: Prompt[];
  onPromptSelect: (prompt: Prompt) => void;
}) {
  if (props.prompts.length === 0) return null;

  return (
    <div className={styles["prompt-hints"]}>
      {props.prompts.map((prompt, i) => (
        <div
          className={styles["prompt-hint"]}
          key={prompt.title + i.toString()}
          onClick={() => props.onPromptSelect(prompt)}
        >
          <div className={styles["hint-title"]}>{prompt.title}</div>
          <div className={styles["hint-content"]}>{prompt.content}</div>
        </div>
      ))}
    </div>
  );
}

export function Chat(props: {
  showSideBar?: () => void;
  sideBarShowing?: boolean;
}) {
  const chatStore = useChatStore();
  const [session, sessionIndex, toggleCollectSession] = useChatStore(
    (state) => [
      state.currentSession(),
      state.currentSessionIndex,
      state.toggleCollectSession,
    ],
  );
  const fontSize = useChatStore((state) => state.config.fontSize);

  const inputRef = useRef<HTMLTextAreaElement>(null);
  const [userInput, setUserInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const { submitKey, shouldSubmit } = useSubmitHandler();

  // prompt hints
  const promptStore = usePromptStore();
  const [promptHints, setPromptHints] = useState<Prompt[]>([]);
  const [moreActionVisible, setMoreActionVisible] = useState(false);
  const [isVoiceModelVisible, setIsVoiceModelVisible] = useState(false);

  const moreActions: Action[] = isWebView()
    ? [
        {
          text: session.isCollect
            ? Locale.Chat.Actions.CollectCancel
            : Locale.Chat.Actions.Collect,
          key: "collect",
          disabled: !session.id,
          onClick: async () => {
            await toggleCollectSession(session);
            setMoreActionVisible(false);
          },
        },
      ]
    : [
        {
          text: session.isCollect
            ? Locale.Chat.Actions.CollectCancel
            : Locale.Chat.Actions.Collect,
          key: "collect",
          disabled: !session.id,
          onClick: async () => {
            await toggleCollectSession(session);
            setMoreActionVisible(false);
          },
        },
        {
          text: Locale.Chat.Actions.ExportToImage,
          key: "exportToImage",
          onClick: async () => {
            await exportToImage();
            setMoreActionVisible(false);
          },
        },
        {
          text: Locale.Chat.Actions.Export,
          key: "export",
          onClick: () => {
            exportMessages(session.messages, session.topic);
            setMoreActionVisible(false);
          },
        },
      ];

  const onSearch = useDebouncedCallback(
    (text: string) => {
      setPromptHints(promptStore.search(text));
    },
    100,
    { leading: true, trailing: true },
  );

  const onPromptSelect = (prompt: Prompt) => {
    setUserInput(prompt.content);
    setPromptHints([]);
    inputRef.current?.focus();
  };

  const scrollInput = () => {
    const dom = inputRef.current;
    if (!dom) return;
    const paddingBottomNum: number = parseInt(
      window.getComputedStyle(dom).paddingBottom,
      10,
    );
    dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
  };

  // only search prompts when user input is short
  const SEARCH_TEXT_LIMIT = 30;
  const onInput = (text: string) => {
    scrollInput();
    setUserInput(text);
    const n = text.trim().length;

    // clear search results
    if (n === 0) {
      setPromptHints([]);
    } else if (!chatStore.config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
      // check if need to trigger auto completion
      if (text.startsWith("/") && text.length > 1) {
        onSearch(text.slice(1));
      }
    }
  };

  // submit user input
  const onUserSubmit = () => {
    if (userInput.length <= 0) return;
    setIsLoading(true);
    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
    setUserInput("");
    inputRef.current?.blur();
  };

  // stop response
  const onUserStop = (messageIndex: number) => {
    console.log(ControllerPool, sessionIndex, messageIndex);
    ControllerPool.stop(sessionIndex, messageIndex);
  };

  // check if should send message
  const onInputKeyDown = (e: KeyboardEvent) => {
    if (shouldSubmit(e)) {
      onUserSubmit();
      e.preventDefault();
    }
  };
  const onRightClick = (e: any, message: Message) => {
    // auto fill user input
    if (message.role === "user") {
      setUserInput(message.content);
    }

    // copy to clipboard
    if (selectOrCopy(e.currentTarget, message.content)) {
      e.preventDefault();
    }
  };

  const onResend = (botIndex: number) => {
    // find last user input message and resend
    for (let i = botIndex; i >= 0; i -= 1) {
      if (messages[i].role === "user") {
        setIsLoading(true);
        chatStore
          .onUserInput(messages[i].content)
          .then(() => setIsLoading(false));
        inputRef.current?.focus();
        return;
      }
    }
  };

  // for auto-scroll
  const latestMessageRef = useRef<HTMLDivElement>(null);

  // wont scroll while hovering messages
  // const [autoScroll, setAutoScroll] = useState(false);

  // preview messages
  const messages = ((session.messages as RenderMessage[]) || [])
    .concat(
      isLoading
        ? [
            {
              role: "assistant",
              content: "……",
              date: dayjs().format("YYYY/MM/DD HH:mm:ss"),
              preview: true,
            },
          ]
        : [],
    )
    .concat(
      userInput.length > 0
        ? [
            {
              role: "user",
              content: userInput,
              date: dayjs().format("YYYY/MM/DD HH:mm:ss"),
              preview: true,
            },
          ]
        : [],
    );
  const [topicModalVisible, setTopicModalVisible] = useState(false);

  const handleOpenTopicModal = (): void => {
    setTopicModalVisible(true);
  };

  const handleCloseTopicModal = (): void => {
    setTopicModalVisible(false);
  };

  const chatBodyRef = useRef<HTMLDivElement>(null);

  const exportToImage = async () => {
    if (!chatBodyRef.current) return;
    const result = await Dialog.confirm({
      content: Locale.Chat.Actions.ExportToImage,
    });
    if (result) {
      const width = chatBodyRef.current.clientWidth;
      const height = chatBodyRef.current.scrollHeight;
      toPng(chatBodyRef.current, {
        backgroundColor: "#fff", // 背景颜色
        width,
        height,
        pixelRatio: window.devicePixelRatio,
      })
        .then((dataUrl) => {
          saveAs(dataUrl, `${session.topic}.png`);
        })
        .catch((error: unknown) => {
          console.error("出错了:", error);
        });
    }
  };
  // auto scroll
  useLayoutEffect(() => {
    setTimeout(() => {
      const dom = latestMessageRef.current;
      if (dom && chatStore.autoScroll) {
        dom.scrollIntoView({
          block: "end",
          behavior: "smooth",
        });
      }
    }, 500);
  });

  return (
    <>
      <div className={styles.chat} key={session.id}>
        <div className={styles["window-header"]}>
          <div
            className={styles["window-header-title"]}
            // onClick={props?.showSideBar}
          >
            <div
              className={`${styles["window-header-main-title"]} ${styles["chat-body-title"]}`}
              onClick={handleOpenTopicModal}
            >
              {session.topic}
            </div>
            <div className={styles["window-header-sub-title"]}>
              {Locale.Chat.SubTitle(session.messages.length)}
            </div>
          </div>
          <div className={styles["window-actions"]}>
            <div
              className={styles["window-action-button"] + " " + styles.mobile}
            >
              <IconButton
                icon={<MenuIcon />}
                bordered
                title={Locale.Chat.Actions.ChatList}
                onClick={props?.showSideBar}
              />
            </div>
            <div
              className={`${styles["window-action-button"]} ${styles.mobile}`}
            >
              <IconButton
                icon={<MoreIcon />}
                bordered
                title={Locale.Chat.Actions.More}
                onClick={() => {
                  setMoreActionVisible(true);
                  // exportMessages(session.messages, session.topic);
                }}
              />
            </div>
            <div className={`${styles["window-action-button"]} ${styles.pc}`}>
              {session.id && (
                <IconButton
                  icon={session.isCollect ? <StarSelectedIcon /> : <StarIcon />}
                  actived={session.isCollect}
                  bordered
                  title={Locale.Chat.Actions.Collect}
                  onClick={() => {
                    toggleCollectSession(session);
                  }}
                />
              )}
            </div>
            <div className={`${styles["window-action-button"]} ${styles.pc}`}>
              <IconButton
                icon={<ShareIcon />}
                bordered
                title={Locale.Chat.Actions.ExportToImage}
                onClick={() => {
                  exportToImage();
                }}
              />
            </div>
            <div className={`${styles["window-action-button"]} ${styles.pc}`}>
              <IconButton
                icon={<ExportIcon />}
                bordered
                title={Locale.Chat.Actions.Export}
                onClick={() => {
                  exportMessages(session.messages, session.topic);
                }}
              />
            </div>
          </div>
        </div>

        <div className={styles["chat-body"]} ref={chatBodyRef}>
          {messages.map((message, i) => {
            const isUser = message.role === "user";

            return (
              <div
                key={i}
                className={
                  isUser ? styles["chat-message-user"] : styles["chat-message"]
                }
              >
                <MessageContainer
                  index={i}
                  isUser={isUser}
                  message={message}
                  onResend={onResend}
                  onRightClick={onRightClick}
                  fontSize={fontSize}
                />
              </div>
            );
          })}
          <div ref={latestMessageRef} style={{ opacity: 0, height: "4em" }}>
            -
          </div>
        </div>

        <div className={styles["chat-input-panel"]}>
          <VoicePopup
            visible={isVoiceModelVisible}
            setUserInput={setUserInput}
            onSubmit={(text) => {
              setUserInput(text);
              setIsVoiceModelVisible(false);
            }}
            onClose={() => setIsVoiceModelVisible(false)}
          />
          <div className={styles["chat-input-panel-tools"]}>
            {(isMobile() || isWebView()) && (
              <IconButton
                icon={<VoiceDarkIcon />}
                bordered
                onClick={() => {
                  setIsVoiceModelVisible(true);
                }}
              />
            )}
          </div>
          <div className={styles["chat-input-panel-inner"]}>
            <textarea
              ref={inputRef}
              className={styles["chat-input"]}
              placeholder={Locale.Chat.Input(submitKey)}
              rows={4}
              onInput={(e) => onInput(e.currentTarget.value)}
              value={userInput}
              onKeyDown={(e) => onInputKeyDown(e as any)}
              // onFocus={() => chatStore.setAutoScroll(true)}
              onBlur={() => {
                // TODO 失去焦点停止自动滚动
                // chatStore.setAutoScroll(false);
                setTimeout(() => setPromptHints([]), 100);
              }}
              autoFocus={!props?.sideBarShowing}
            />
            <IconButton
              icon={<SendWhiteIcon />}
              text={Locale.Chat.Send}
              className={styles["chat-input-send"] + " no-dark"}
              onClick={onUserSubmit}
            />
          </div>
        </div>
      </div>
      <ActionSheet
        visible={moreActionVisible}
        actions={moreActions}
        onClose={() => setMoreActionVisible(false)}
      />
      <UpdateTopicdModal
        session={session}
        visible={topicModalVisible}
        onClose={handleCloseTopicModal}
      />
    </>
  );
}

function useSwitchTheme() {
  const config = useChatStore((state) => state.config);
  useLayoutEffect(() => {
    document.documentElement.setAttribute(
      "data-prefers-color-scheme",
      config.theme,
    );
  }, [config.theme]);
  useEffect(() => {
    document.body.classList.remove("light");
    document.body.classList.remove("dark");

    if (config.theme === "dark") {
      document.body.classList.add("dark");
    } else if (config.theme === "light") {
      document.body.classList.add("light");
    }

    const themeColor = getComputedStyle(document.body)
      .getPropertyValue("--theme-color")
      .trim();
    const metaDescription = document.querySelector('meta[name="theme-color"]');
    metaDescription?.setAttribute("content", themeColor);
  }, [config.theme]);
}

function exportMessages(messages: Message[], topic: string) {
  const mdText =
    `# ${topic}\n\n` +
    messages
      .map((m) => {
        return m.role === "user" ? `## ${m.content}` : m.content.trim();
      })
      .join("\n\n");
  const filename = `${topic}.md`;

  showModal({
    title: Locale.Export.Title,
    children: (
      <div className="markdown-body">
        <pre className={styles["export-content"]}>{mdText}</pre>
      </div>
    ),
    actions: [
      <IconButton
        key="copy"
        icon={<CopyIcon />}
        bordered
        text={Locale.Export.Copy}
        onClick={() => copyToClipboard(mdText)}
      />,
      <IconButton
        key="download"
        icon={<DownloadIcon />}
        bordered
        text={Locale.Export.Download}
        onClick={() => downloadAs(mdText, filename)}
      />,
    ],
  });
}

function showMemoryPrompt(session: ChatSession) {
  showModal({
    title: `${Locale.Memory.Title} (${session.lastSummarizeIndex} of ${session.messages.length})`,
    children: (
      <div className="markdown-body">
        <pre className={styles["export-content"]}>
          {session.memoryPrompt || Locale.Memory.EmptyContent}
        </pre>
      </div>
    ),
    actions: [
      <IconButton
        key="copy"
        icon={<CopyIcon />}
        bordered
        text={Locale.Memory.Copy}
        onClick={() => copyToClipboard(session.memoryPrompt)}
      />,
    ],
  });
}

const useHasHydrated = () => {
  const [hasHydrated, setHasHydrated] = useState<boolean>(false);

  useEffect(() => {
    setHasHydrated(true);
  }, []);

  return hasHydrated;
};
const useInitialSession = () => {
  const { initialSession, selectSession } = useChatStore();
  const {
    user: { id: userId },
  } = useAuthStore();
  const { isAutoLogin } = useAutoLogin();
  const handleConversationList = async () => {
    if (!userId) return;
    const response = await getConversationList(userId);
    initialSession(response);

    selectSession(0);
  };
  useEffect(() => {
    if (isAutoLogin) return;
    handleConversationList();
  }, [userId, isAutoLogin]);
};

export function Home() {
  const [createNewSession, currentIndex, removeSession] = useChatStore(
    (state) => [
      state.newSession,
      state.currentSessionIndex,
      state.removeSession,
    ],
  );
  const { clearAuth, version } = useAuthStore();

  const router = useRouter();

  const loading = !useHasHydrated();
  const [showSideBar, setShowSideBar] = useState(true);

  // setting
  const [openSettings, setOpenSettings] = useState(false);
  const config = useChatStore((state) => state.config);

  useSwitchTheme();
  useInitialSession();

  if (loading) {
    return <Loading />;
  }

  return (
    <div
      className={`${
        config.tightBorder ? styles["tight-container"] : styles.container
      }`}
    >
      <div
        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
      >
        <div className={styles["sidebar-header"]}>
          <div className={styles["sidebar-title"]}>{Locale.META.title}</div>
          <div className={styles["sidebar-sub-title"]}>
            {Locale.META.description}
          </div>
          <div className={styles["sidebar-logo"]}>
            <ChatIcon />
          </div>
        </div>

        <div
          className={styles["sidebar-body"]}
          onClick={() => {
            setOpenSettings(false);
            setShowSideBar(false);
          }}
        >
          <ChatList />
          {/* <div className={styles["sidebar-collect"]}>收藏列表</div>
          <ChatList /> */}
        </div>

        <div className={styles["sidebar-tail"]}>
          <div className={styles["sidebar-actions"]}>
            <div className={styles["sidebar-action"] + " " + styles.mobile}>
              <IconButton
                icon={<CloseIcon />}
                onClick={async () => {
                  const result = await Dialog.confirm({
                    content: Locale.Home.DeleteChat,
                  });
                  if (result) {
                    await removeSession(currentIndex);
                  }
                }}
              />
            </div>
            {/* <div className={styles["sidebar-action"] + " " + styles.pc}>
              <IconButton
                icon={<ClearIcon />}
                title={Locale.Settings.Actions.ClearAll}
                onClick={async () => {
                  const result = await Dialog.confirm({
                    content: Locale.Settings.Actions.ClearAll,
                  });
                  if (result) {
                    // removeSession(currentIndex);
                  }
                }}
              />
            </div> */}
            {!inNestedIframe() && !isWebView() && (
              <>
                <div className={styles["sidebar-action"]}>
                  <IconButton
                    icon={<SettingsIcon />}
                    onClick={() => {
                      setOpenSettings(true);
                      setShowSideBar(false);
                    }}
                  />
                </div>
                <div className={`${styles["sidebar-action"]}`}>
                  <IconButton
                    icon={<ExitIcon />}
                    onClick={async () => {
                      const result = await Dialog.confirm({
                        content: Locale.Home.Logout,
                      });
                      if (result) {
                        clearAuth();
                        router.replace("/login");
                      }
                    }}
                  />
                </div>
              </>
            )}
          </div>
          <div>
            <IconButton
              className={styles["sidebar-actions-new"] + " no-dark"}
              icon={<AddWhiteIcon />}
              text={Locale.Home.NewChat}
              onClick={() => {
                createNewSession();
                setShowSideBar(false);
              }}
            />
          </div>
        </div>
      </div>

      <div className={styles["window-content"]}>
        {openSettings ? (
          <Settings
            closeSettings={() => {
              setOpenSettings(false);
              setShowSideBar(true);
            }}
          />
        ) : (
          <Chat
            key="chat"
            showSideBar={() => setShowSideBar(true)}
            sideBarShowing={showSideBar}
          />
        )}
      </div>
    </div>
  );
}

function MessageContainer(props: IMessageContainer) {
  const domRef = useRef<HTMLDivElement>(null);

  const exportToImage = async () => {
    if (!domRef.current) return;
    const result = await Dialog.confirm({
      content: Locale.Chat.Actions.ExportToImage,
    });
    if (result) {
      const width = domRef.current.clientWidth;
      const height = domRef.current.scrollHeight;
      toPng(domRef.current, {
        backgroundColor: "#fff", // 背景颜色
        width,
        height,
        canvasWidth: width * window.devicePixelRatio,
        canvasHeight: height * window.devicePixelRatio,
      })
        .then((dataUrl) => {
          saveAs(dataUrl, "dom-image.png");
        })
        .catch((error: unknown) => {
          console.error("出错了:", error);
        });
    }
  };
  const { message, isUser, index, fontSize, onResend, onRightClick } = props;
  return (
    <div className={styles["chat-message-container"]}>
      <div className={styles["chat-message-avatar"]}>
        <Avatar role={message.role} />
      </div>
      {(message.preview || message.streaming) && (
        <div className={styles["chat-message-status"]}>
          {Locale.Chat.Typing}
        </div>
      )}
      <div className={styles["chat-message-item"]} ref={domRef}>
        {!isUser && !(message.preview || message.content.length === 0) && (
          <div className={styles["chat-message-top-actions"]}>
            {message.streaming ? (
              <></>
            ) : (
              <>
                <div
                  className={styles["chat-message-top-action"]}
                  onClick={() => onResend(index)}
                >
                  {Locale.Chat.Actions.Retry}
                </div>
                {/* <div
                  className={styles["chat-message-top-action"]}
                  onClick={exportToImage}
                >
                  {Locale.Chat.Actions.ExportToImage}
                </div> */}
              </>
            )}

            <div
              className={styles["chat-message-top-action"]}
              onClick={() => copyToClipboard(message.content)}
            >
              {Locale.Chat.Actions.Copy}
            </div>
          </div>
        )}
        {(message.preview || message.content.length === 0) && !isUser ? (
          <LoadingIcon />
        ) : (
          <div
            className="markdown-body"
            style={{ fontSize: `${fontSize}px` }}
            onContextMenu={(e) => onRightClick(e, message)}
          >
            <Markdown content={message.content} />
          </div>
        )}
      </div>
      {!isUser && !message.preview && (
        <div className={styles["chat-message-actions"]}>
          <div className={styles["chat-message-action-date"]}>
            {message.date}
          </div>
        </div>
      )}
    </div>
  );
}
